<template>
  <div>
        <div class="content">
          <div class="logo">
            <!-- <navigator url="/" open-type="redirect" hover-class="other-navigator-hover">
              <image src="../static/t-01.png"></image>
            </navigator> -->
              <div class="l-top">
				<router-link to='/'>
                  <img src="../assets/images/t-01.png"/>
				</router-link>
              </div>
              <div class="r-top">
                  客服QQ：<span>888888</span>
                  <div class="loginTOP" v-if="userInfo==''" @click="toggle()">登录/注册</div>
				  <div   v-if="userInfo!=''" >
				  	<b class="loginhead"  @click="goHome()">{{userInfo.userInfo.nickName}}</b> | <b @click="logout">退出</b>
				  </div>
              </div>
          </div>
        </div>
        <div class="nav">
            <div class="content">
                  <div class="navigator general">
                        <span @click="bindNav(index,itme)" :class="classIdex==index?'atv':''" v-for="itme,index in classType" :key="index">{{itme.PClass.names}}</span>
                  </div>
            </div>
        </div>
		

		<!-- 注册登录 -->
			<el-dialog width="400px" :close-on-click-modal="false" center :title="login?'用户登录':'注册'" :visible.sync="dialogTableVisible">
					<!-- 登录 -->
					<div class="login" v-if="login">
							<el-form ref="formlogin" :model="formDatalogin" :rules="rules">
								<el-form-item prop="username" >
									<el-input  v-model="formDatalogin.username" placeholder="请输入用户名"></el-input>
								</el-form-item>
								<el-form-item prop="password">
									<el-input   v-model="formDatalogin.password" placeholder="请输入密码"></el-input>
								</el-form-item>
							</el-form>
						<!-- <div class="forget-password">忘记密码？</div> -->
	
						<el-button class="userLogin" type="danger" :disabled="disabled" @click="loginSubmit">立即登录</el-button>
						<div class="agreement">
							<span>登录或注册代表您已阅读并接受</span>
							<a  class="navigator-hover" >《用户协议》</a>
							<a class="navigator-hover">《隐私政策》</a>
							</div>
							<div class="click-register"
							>没有账号？
							<span @click="userLogin()">点击注册</span>
						</div>
					</div>
					<!-- 注册 -->
					<div class="login" v-if="!login">
							<el-form ref="form" :model="formData" :rules="rules">
								<el-form-item prop="username" >
									<el-input  v-model="formData.username" placeholder="请输入用户名"></el-input>
								</el-form-item>
								<el-form-item prop="password">
									<el-input  v-model="formData.password" placeholder="请输入密码" ></el-input>
								</el-form-item>
								<el-form-item prop="mobile" >
									<el-input  v-model="formData.mobile" placeholder="请输入手机号"></el-input>
								</el-form-item>
								<el-form-item prop="code">
									<el-input  class="input" style="width:59%" v-model="formData.code"  placeholder="手机验证码" ></el-input>
									<div class="codephone" @click="getcode" v-if='isCodeShow'>{{codespan}}</div>
									<div class="codephone del"  v-if='!isCodeShow'>{{codespan}}</div>
								</el-form-item>

							</el-form>
						<el-button class="userLogin" :disabled="disabled"  type="danger" @click="submit">注册</el-button>
						<div class="agreement">
								<span>登录或注册代表您已阅读并接受</span>
								<a class="navigator-hover">《用户协议》</a>
								<a class="navigator-hover">《隐私政策》</a>
						</div>
						<div class="click-register">
								<span @click="userLogin()">点击登录</span>
						</div>
					</div>
			</el-dialog>


  </div>
</template>

<script>
export default {
  data() {
    return {
		disabled:false,
		dialogTableVisible:false,
		userInfo:'',
        select:2,
		login: true,
		time:null,
		codespan:'获取验证码',
		isCodeShow:true,
		formDatalogin:{
				username: '',
				password: '',
				mobile:'',
				code:'',
		},
	
		formData: {
				username: '',
				password: '',
				mobile:'',
				code:'',
		},
		rules: {
				// 对name字段进行必填验证
				username: [{
							required: true,
							message: '请输入姓名',
						}
					],
				password: [{
							required: true,
							message: '请输入密码',
						},
						{
							min: 6,
							message: '密码长度最少 6个字符',
						}
					],
				mobile: [{
							required: true,
							message: '请输入手机号',
						},
						{
							validator:function(rule, value, callback){
								var reg = /^1[3|4|5|7|8|9]\d{9}$/; 
								if (!reg.test(value)) {
									callback(new Error('手机号码格式不正确'))
								}
								else{
									callback();
								}

							}
						}],
				// 对email字段进行必填验证
				code:  [{
							required: true,
							message: '请输入手机验证码',
						},
						{
							minLength: 4,
							message: '密码长度最少 4个字符',
						}
					],
			}
    };
  },
    watch: {
   
  },

  computed:{
			classType(){
				return this.$store.state.classType
			},
			classIdex(){
				return this.$store.state.classIdex
			},
		},
  mounted() {
		const u=sessionStorage.getItem('storage_key')
		if(u){
			this.userInfo=JSON.parse(u)
		}
		sessionStorage.getItem("key")
		this.$apis.classType({
			limit:1000,
			page:1
		}).then(res=>{

			this.$store.commit("setClassType", res.data.data.list)
			this.$store.commit("setClassTypeSole", res.data.data.list[0])
		})
       this.getRoutes()
    
  },
  methods: {
	toggle() {
      	this.dialogTableVisible=true
    },
    userLogin() {
      this.login = this.login?false:true;
    },

	getcode(){
	
		this.$refs.form.validateField(['mobile'],(valid)=>{
			if(!valid){
				clearInterval(this.time)
				let numberTime=60
				this.isCodeShow=false
				this.time=setInterval(()=>{
					numberTime--
					if(numberTime<=0){
						numberTime=60
						clearInterval(this.time)
						this.codespan='获取验证码'
						this.isCodeShow=true
						return
					}
					this.codespan=numberTime+'秒后获取'
					
				},1000)

				this.$apis.regCaptcha({
					mobile:this.formData.mobile
				}).then(res=>{
					if(res.data.errno==0){
						this.$message.success( '获取验证码成功');
					}
					else{
						this.$message.error(res.data.errmsg);
					}
				})
			}
				

		})
        


    },

	submit() {
		
			this.$refs.form.validate(valid=>{
				if(valid){
					this.disabled=true
					this.$apis.register({
						code: this.formData.code,
						mobile: this.formData.mobile,
						password: this.formData.password,
						username: this.formData.username,
					}).then(res=>{
						this.disabled=false
							if(res.data.errno==0){
								this.$message.success( '恭喜你，注册成功');
								this.formData.username=''
								this.formData.password= ''
								this.formData.mobile=''
								this.formData.code=''
								this.dialogTableVisible=false
							}else{
								this.$message.error(res.data.errmsg);
							}
					})
				}else{
					return false;
				}

				
			})
		},

		loginSubmit(){
			this.$refs.formlogin.validate((valid)=>{
				if(valid){
					this.disabled=true
					this.$apis.login({
						password: this.formDatalogin.password,
						username: this.formDatalogin.username,
					}).then(res=>{
							this.disabled=false
							if(res.data.errno==0){
								this.$message.success( '登录成功');
								this.$store.commit("setUserInfo", res.data.data)
								sessionStorage.setItem('storage_key',JSON.stringify( res.data.data))
								this.userInfo= res.data.data
								this.formDatalogin.username=''
								this.formDatalogin.password= ''
								this.formDatalogin.mobile=''
								this.formDatalogin.code=''
								this.dialogTableVisible=false
							}else{
								this.$message.error(res.data.errmsg);
							}
					})
				}else{
					return false;
				}
				
			})
		},
		logout(){
			this.$apis.logout().then(res=>{
				
			})
		},
    getRoutes(){
        if(!this.$route.meta.pagePath){
              
        }
        
    },
	goHome(){
		this.$router.push({path:'./my'})
	},
    bindNav(e,itme){
        this.select=e
		this.$store.commit("setClassTypeIndex", e)
        this.$store.commit("setClassTypeSole", itme)
		this.$router.push({path:'/'})
    }


  },
};
</script>


